<template>
  <header class="header">
    <h1>todos</h1>
    <!--                              动态绑定isAll的属性  因为是every方法 返回的不是true就是false -->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="task"
      @keydown.enter="addTask"
    />
    <!-- 双向绑定一个task  .trim去除首尾空格-->
    <!-- 添加一个按键事件 加个事件修饰符 意思为只有按下enter才会触发-->
    <!-- 触发addTask这个函数后执行代码 往父组件一个名叫addTask的自定义属性传一个实参 传入用户输入的task -->
    <!-- 然后父组件接收 并且触发一个函数  执行代码  -->
    <!-- 设置一个形参接收实参  -->
    <!--  -->
    <!-- 然后子组件按下回车后把data里面的task重新清空 -->
  </header>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  //
  computed: {
    isAll: {
      get() {
        // 当所有的isDone属性为true的时候 every属性就返回一个true
        return this.list.every((item) => item.isDone === true)
      },
      set(val) {
        console.log(val)
        // 向父组件名叫checkAll的自定义事件传递一个实参
        this.$emit('checkAll',val)
      },
    },
  },
  data() {
    return {
      task: '',
    }
  },
  //
  methods: {
    addTask() {
      console.log('按下了回车')
      this.$emit('addTask', this.task) //这里的this指向data里面的task  表示传的是子组件里面的task数据
      this.task = ''
    },
  },
}

//
</script>
